<template>
  <div class="login-page">
    <!-- 头部标题 -->
    <div class="header">
      <h1>防磨防爆平台-用户登录</h1>
    </div>

    <!-- 登录区域 -->
    <div class="design-w3l">
      <div class="mail-form-agile" v-if="loginFlag">
        <el-form :model="sysUsers" :rules="rules" ref="loginForm" label-width="80px" class="login-form">
          <el-form-item label="账号：" prop="userName">
            <el-input v-model="sysUsers.userName" placeholder="请输入账号" :disabled="loading" 
              class="login-input"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="userPsw">
            <el-input v-model="sysUsers.userPsw" type="password" placeholder="请输入密码" :disabled="loading"
               class="login-input"></el-input>
          </el-form-item>
          <el-form-item class="form-actions">
            <div class="button-group">
              <el-button type="primary" @click="handleLogin()" class="login-btn" :loading="loading">
                登录
              </el-button>
              <!-- <el-button 
                type="warning" 
                @click="toRegister()" 
                class="register-btn"
                :disabled="loading"
              >
                注册
              </el-button> -->
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 注册区域-->
      <!-- <div class="mail-form-agile" v-if="registerFlag">
        <el-form :model="sysUsers">
          <el-form-item label="账号：">
            <el-input v-model="sysUsers.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="sysUsers.userPsw" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：">
            <el-input v-model="password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: space-around">
              <el-button type="primary" @click="toLogin()" class="button"
                >返回</el-button
              >
              <el-button type="success" @click="register()" class="button"
                >确认注冊</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div> -->

      <div class="clear"></div>
    </div>

    <!-- 页脚信息 -->
    <div class="footer">
      <p>华电新疆發電有限公司乌鲁木齐分公司</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      sysUsers: {
        userName: "",
        userPsw: ""
      },
      loginFlag: true,
      registerFlag: false,
      password: "",
      loading: false, // 登录按钮加载状态
      // 表单验证规则
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" }
        ],
        userPsw: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 13, message: "密码长度不能少于13位", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 页面跳转
    toRegister() {
      this.registerFlag = true;
      this.loginFlag = false;
    },
    toLogin() {
      this.registerFlag = false;
      this.loginFlag = true;
    },

    // 处理登录逻辑
    handleLogin() {
      // 表单验证
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.login();
        } else {
          this.$message.warning("请完善登录信息");
          return false;
        }
      });
    },

    // 登录请求
    login() {
      this.loading = true;
      this.$api.usersApi.login(this.sysUsers)
        .then(res => {
          this.loading = false;
          // console.log(res);
          // 结合后端返回结构，通过 code 判断登录状态，1 代表成功
          if (res.data.code === 1) {
            this.$message.success(res.msg || "登录成功，正在跳转...");
            // 存储用户信息到本地存储
            localStorage.setItem("userName", res.data.data.userName);
            localStorage.setItem("userId", res.data.data.userId);
            setTimeout(() => {
              // console.log(res.data.data);
              if(res.data.data.roleId == 1)this.$router.push({name:"admin"});
              else this.$router.push({name:"home"});
            }, 1000);
          } else {
            // 后端返回非成功 code，提示错误信息
            this.$message.error(res.msg || "登录失败，请重试");
          }
        })
        .catch(error => {
          this.loading = false;
          console.error("登录请求失败:", error);
          this.$message.error("网络异常，请检查网络连接");
        });
    },

    register() {
      console.log(2);
    },

    // 强口令验证函数
    validatePasswordStrength(password) {
      // 长度至少13位
      if (password.length < 13) {
        return { valid: false, message: "密码长度至少13位" };
      }

      // 必须包含以下四种中的至少三种：小写字母、大写字母、数字、特殊字符
      const hasLower = /[a-z]/.test(password);
      const hasUpper = /[A-Z]/.test(password);
      const hasNumber = /\d/.test(password);
      const hasSpecial = /[@$!%*?&]/.test(password);

      const conditionsMet = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean).length;

      if (conditionsMet < 3) {
        return {
          valid: false,
          message: "密码必须包含以下四种中的至少三种：小写字母、大写字母、数字、特殊字符(@$!%*?&)"
        };
      }

      return { valid: true };
    }
  }
};
</script>

<style scoped>
@import url("/src/assets/css/login.css");

::v-deep .el-input__inner {
  height: 46px !important;
  width: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 0 15px !important;
}

::v-deep .el-input__prefix {
  color: rgba(255, 255, 255, 0.7) !important;
  left: 12px !important;
}

::v-deep .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

::v-deep .el-input__inner:focus {
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

::v-deep .el-button {
  height: 46px !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

::v-deep .el-button--primary {
  background-color: rgba(64, 158, 255, 0.9) !important;
  border-color: rgba(64, 158, 255, 0.9) !important;
}

::v-deep .el-button--primary:hover {
  background-color: rgba(64, 158, 255, 1) !important;
  border-color: rgba(64, 158, 255, 1) !important;
}

::v-deep .el-button--warning {
  background-color: rgba(250, 173, 20, 0.9) !important;
  border-color: rgba(250, 173, 20, 0.9) !important;
}

::v-deep .el-button--warning:hover {
  background-color: rgba(250, 173, 20, 1) !important;
  border-color: rgba(250, 173, 20, 1) !important;
}

::v-deep .el-form-item__label {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15px !important;
}

::v-deep .el-loading-spinner .path {
  stroke: rgba(255, 255, 255, 0.8) !important;
}
</style>
